<template>
	<view class="index">
		<!-- 搜索框 -->
		<view class="search-box">
			<view class="loaction">
				<view class="sy">
					<image src="/static/wine-index/sy_icon_dw.png" />
				</view>
				<view>{{address || '邯郸'}}</view>
				<view class="city">
					<image src="/static/wine-index/loaction.png" />
				</view>
			</view>
			<view class="search" @tap="toSrearch">
				<view class="icon">
					<image src="/static/images/search.png" />
				</view>
				<view class="text">{{searchContent ? searchContent : '搜索商品名称或者店铺'}}</view>
			</view>
		</view>

		<!-- banner -->
		<view class="imageView">
			<swiper class="img" indicator-dots="true" indicator-color="rgba(255,252,255, .3)"
				indicator-active-color="rgba(255,252,255, .6)" autoplay="true" circular="true" style="height: 256rpx;">
				<swiper-item class="item" @tap="toProdDetail(imgItem.spuId)">
					<image src="/static/wine-index/banner.png" />
				</swiper-item>
			</swiper>
		</view>


		<!-- 导航 -->
		<view class="nav-box">
			<view class="category">
				<block>
					<view class="item" style="display: inline-block;width: 60px;margin: 0px 6.5px;" @tap="jiusuodaBtn">
						<view class="icon">
							<image src="/static/wine-index/suda.png" />
						</view>
						<view class="text">酒速达</view>
					</view>
				</block>
				<block>
					<view class="item" style="display: inline-block;width: 60px;margin: 0px 6.5px;" @tap="restaurantBtn">
						<view class="icon">
							<image src="/static/wine-index/meishi.png" />
						</view>
						<view class="text">餐饮</view>
					</view>
				</block>
				<block>
					<view class="item" style="display: inline-block;width: 60px;margin: 0px 6.5px;">
						<view class="icon">
							<image src="/static/wine-index/changjing.png" />
						</view>
						<view class="text">场景服务</view>
					</view>
				</block>
			</view>
		</view>

		<!-- 热销特惠 -->
		<view class="hot">
			<view class="hot_top">
				<view class="hot_top_left">
					<image class="img1" src="/static/wine-index/speaker-one.png" />
				</view>
				<view class="hot_top_right">
					<span>查看全部查看全部查看全部查看全部查看全部查看全部查看全部查看全部查看全部</span>
				</view>
			</view>
		</view>

		<!-- 场景定制 -->
		<view class="scenario">
			<swiper class="scenario_main" indicator-dots="true" indicator-color="rgba(255,252,255, .3)"
				indicator-active-color="rgba(255,252,255, .6)" autoplay="true" circular="true" style="height: 216rpx;">
				<swiper-item class="item" style="display: flex; justify-content: space-between;">
					<view class="scenario_main_left">
						<img src="/static/wine-index/scenario.png" alt="">
					</view>
					<view class="scenario_main_right">
						<view class="top">场景定制-满足个性化需求</view>
						<view class="center">上门布置、到店布置一站完成</view>
						<view class="buttom">场景定制--></view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 推荐 -->
		<view class="prods">
			<block v-for="(item, index) in categoryProdList" :key="index">
				<view class="item" @tap="toProdDetail(item.spuId)">
					<view class="img">
						<image
							:src="item.mainImgUrl.indexOf('http://')==-1 ? resourcesUrl + item.mainImgUrl : item.mainImgUrl" />
					</view>
					<view class="text-box">
						<view class="name">{{ item.spuName }}</view>
						<view class="price-box">
							<view class="price">
								<view class="symbol">￥</view>
								<view class="big">{{ wxs.parsePrice(item.priceFee)[0] }}</view>
								<view class="symbol">.{{ wxs.parsePrice(item.priceFee)[1] }}</view>
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<!-- 无商品显示 -->
		<view v-if="categoryProdList.length===0" class="empty">
			<view class="img">
				<image src="/static/empty-img/not-found.png" />
			</view>
			<view class="text">没有找到对应商品，看看别的吧</view>
		</view>

		<view v-if="isLoadAll && categoryProdList.length>0" class="nomore">没有更多了，看看别的吧</view>
	</view>
</template>
<script module="wxs" lang="wxs" src="../../wxs/index.wxs"></script>

<script>
	const http = require('../../utils/http.js')
	const cartCount = require('../../utils/cart-count.js')
	const util = require('../../utils/util.js')
	import config from '../../utils/config.js'
	import Wechat from '../../utils/wechat.js'
	export default {
		data() {
			return {
				resourcesUrl: config.resourcesUrl,
				picDomain: config.picDomain, // 图片前缀
				searchContent: '',
				imgUrl: '',
				// 查询的参数
				pageQuery: {
					shopId: 0
				},
				// 返回参数
				noticeData: {
					list: [], // 返回的列表
					total: 0, // 一共多少条数据
					pages: 0 // 一共多少页
				},
				categoryList: [], // 分类列表
				selectedIndex: 0, // 选中的分类项(默认为第一个分类)
				selectedCategoryId: null,
				// 分类商品列表的请求参数
				searchListQuery: {
					pageSize: 10,
					pageNum: 1,
					// primaryCategoryId: null,
					sort: 1 // 新品 1:新品
				},
				// 分类商品列表返回的参数
				searchListData: {
					list: [],
					total: 0, // 总数
					pages: 0 // 总页数
				},
				categoryProdList: [], // 分类的商品列表
				isLoadAll: false, // 是否加载全部
				// 分类滚动栏横向滚动距离
				categoryScrollLeft: 0,
				// 分类滚动的总宽度
				contentScrollW: 0,
				isWechat: false // 是否为微信环境
			}
		},

		onShow() {
			const tempuid = uni.getStorageSync('tempUid')
			const token = uni.getStorageSync('token')

			// #ifdef MP-WEIXIN
			if (!tempuid && !token) {
				wx.login({
					success: res => {
						this.login('/gscloud_auth/ua/social/ma', res.code) // 小程序-先请求微信小程序登录接口
					}
				})
			} else {
				this.queryDataGroup()
			}
			// #endif

			// #ifdef H5
			this.isWechat = Wechat.isWechat()
			if (this.isWechat) { // H5-微信环境
				if (!tempuid && !token) {
					http.mpAuthLogin('/', true)
					// alert('公众号网页登录location.href:' + location.href)
					const code = util.getUrlKey('code')
					// alert('H5-微信环境 code:' + code)
					this.login('/gscloud_auth/ua/social/mp', code) // 先请求微信公众号登录接口
				} else {
					this.queryDataGroup()
				}
			} else {
				this.queryDataGroup()
			}
			// #endif

			// 获取购物车数字
			cartCount.getCartCount()
		},

		onLoad(options) {
			this.queryDataGroup()
		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			if (this.searchListQuery.pageNum < this.searchListData.pages) {
				this.searchListQuery.pageNum = this.searchListQuery.pageNum + 1
				this.getSearchList()
			} else {
				this.isLoadAll = true
			}
		},

		methods: {
			/**
			 * 跳转商品详情
			 */
			toProdDetail(spuId) {
				if (spuId) {
					uni.navigateTo({
						url: '/pages/detail/detail?spuId=' + spuId
					})
				}
			},

			/**
			 * 微信小程序/公众号登录
			 */
			login(url, code) {
				// 发送 code 到后台换取 token
				http.request({
					login: true,
					url: url,
					data: code,
					callBack: res => {
						uni.setStorageSync('token', res.accessToken)
						uni.setStorageSync('loginResult', res) // 保存整个登录数据
						this.queryDataGroup() // 查询页面所有数据
					},
					errCallBack: res => {
						// 异常
						uni.hideLoading()
						if (res.code === 'A04001') {
							uni.setStorageSync('tempUid', res.data) // token或tempUid
							// 社交账号未绑定
							uni.showModal({
								title: '提示',
								content: '还未绑定账号，是否前往绑定？',
								success: data => {
									if (data.confirm) { // 确认
										uni.navigateTo({
											url: '/pages/bind-account/bind-account'
										})
									}
								}
							})
						}
					}
				}, true)
			},

			/**
			 * 查询页面数据方法合集
			 */
			queryDataGroup() {
				this.getIndexImgs()
				this.getPlatformCategoryList()
			},

			/**
			 * 轮播图
			 */
			getIndexImgs() {
				uni.showLoading()
				var params = {
					url: '/gscloud_multishop/ua/index_img/list',
					method: 'GET',
					data: {
						shopId: this.pageQuery.shopId
					},
					callBack: res => {
						uni.hideLoading()
						this.imgUrl = res[0].imgUrl
					}
				}
				http.request(params)
			},

			/**
			 * 获取商品列表
			 */
			getSearchList() {
				uni.showLoading()
				this.isLoadAll = false
				// this.searchListQuery.primaryCategoryId = this.selectedCategoryId
				const params = {
					url: '/gscloud_search/ua/search/simple_page',
					method: 'GET',
					data: this.searchListQuery,
					callBack: res => {
						this.searchListData = res
						let list = []
						if (this.searchListQuery.pageNum === 1) {
							list = res.list[0].spus
						} else {
							list = this.categoryProdList
							list = list.concat(res.list[0].spus)
						}
						if (this.searchListQuery.pageNum === this.searchListData.pages) {
							this.isLoadAll = true
						}
						this.categoryProdList = list
						uni.hideLoading()
					}
				}
				http.request(params)
			},
			/**
			 * 获取分类栏 scroll-view 滚动相关宽度
			 */
			getCategoryScrollWidth() {
				const query = uni.createSelectorQuery().in(this)
				query.select('.category').boundingClientRect(data => {
					// scroll-view 的宽度
					this.contentScrollW = data.width
				}).exec()
				// 后面优化下这个地方
				setTimeout(() => {
					query.selectAll('.category-item').boundingClientRect(data => {
						let dataLen = data.length;
						for (let i = 0; i < dataLen; i++) {
							// scroll-view 各个分类项目的距离左边栏的距离
							this.categoryList[i].left = data[i].left
							// scroll-view 各个分类项目的宽度(看样式那里原来写死了20%，我改成自动宽度)
							this.categoryList[i].width = data[i].width
						}
					}).exec()
				}, 1)
			},
			/**
			 * 获取平台分类
			 */
			getPlatformCategoryList() {
				uni.showLoading()
				const params = {
					url: '/gscloud_product/ua/category/category_list',
					method: 'GET',
					data: {
						shopId: 0,
						parentId: 0
					},
					callBack: res => {
						this.categoryList = res.slice(0, 3)
						this.getSearchList()
						uni.hideLoading()
						this.getCategoryScrollWidth()
					}
				}
				http.request(params)
			},
			/**
			 * 切换分类
			 */
			switchCategory(e) {
				const index = parseInt(e.currentTarget.dataset.index)
				this.selectedCategoryId = parseInt(e.currentTarget.dataset.categoryid)
				if (this.selectedIndex === index) {
					return
				}
				this.selectedIndex = index
				this.searchListQuery.pageNum = 1
				// scorll-view 实现居中显示的滚动位置(偏移值): 当前点击子元素距离左边栏的距离 - scroll-view 宽度的一半  + 当前点击子元素一半的宽度 - 父盒子边距(如有)
				this.categoryScrollLeft = this.categoryList[index].left - this.contentScrollW / 2 + this.categoryList[
					index].width / 2 - 15
				this.getSearchList()
			},
			scroll(e) {
				setTimeout(() => {
					this.categoryScrollLeft = e.target.scrollLeft
				})
			},

			// 跳转搜索页
			toSrearch() {
				uni.navigateTo({
					url: '/pages/search-page/search-page'
				})
			},

			// 跳转新品推荐
			toNewProds() {
				uni.navigateTo({
					url: '/pages/new-prods/new-prods'
				})
			},
			notOpen(title) {
				uni.showModal({
					title: '提示',
					content: `${title}暂未开源`,
					showCancel: false,
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			jiusuodaBtn() {
				console.log(1111)
				uni.navigateTo({
					url: '/pages/jiusuoda/jiusuoda'
				})
			},
			restaurantBtn() {
				console.log(1111)
				uni.navigateTo({
					url: '/pages/restaurant/restaurant'
				})
			}
		}
	}
</script>

<style>
	@import "./index.css";
</style>